<template>
  <div class="people" style="padding-bottom: 50px">

    <div class="box">
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">

        <van-cell center class="fen" v-for="(item, index) in menuList" :key="index" :title="item.text" is-link :url="item.url"
          :value="item.number" @click.native="link(index,item.url)">

          <template slot="icon" v-if="index<=[2]">
            <van-image style="width: 25px; height: 27px" :src="item.icon"></van-image>
          </template>

          <template slot="icon" v-if="index>[2]">
            <div style="margin-left: 9px;margin-right: 8px;">{{item.num}}</div>
          </template>

          <template slot="title">
            <span class="text">{{item.text}}</span>
          </template>

          <template slot="value">
            <span class="custom-value" style="color: #1e8dff">{{ item.number }}</span>
          </template>
        </van-cell>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'fenju',

    data() {
      return {
        menuList: [{
            text: 'A分局',
            icon: require('../assets/images/ranking/icon_1.jpg'),
            number: 3200,
            url: '/paichusuo'
          },
          {
            text: 'B分局',
            icon: require('../assets/images/ranking/icon_2.jpg'),
            number: 3096,
            url: '/paichusuo'
          },
          {
            text: 'C分局',
            icon: require('../assets/images/ranking/icon_3.jpg'),
            number: 2063,
            url: '/paichusuo'
          },
          {
            text: 'D分局',
            num: 4,
            number: 1289,
            url: '/paichusuo'
          },
          {
            text: 'E分局',
            num: 5,
            number: 1089,
            url: '/paichusuo'
          },
          {
            text: 'F分局',
            num: 6,
            number: 1023,
            url: '/paichusuo'
          },
          {
            text: 'G分局',
            num: 7,
            number: 1004,
            url: '/paichusuo'
          },
          {
            text: 'H分局',
            num: 8,
            number: 3089,
            url: '/paichusuo'
          }
        ],
        activeNames: [],
        isLoading: false,
      }
    },
    methods: {
      link(index, url) {
        if (index >= 0) {
          this.$router.push(url)
        }
      },
      onClickLeft() {
        window.history.go(-1)
      },

      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      },
    }
  }
</script>

<style lang="less">
  .content_box {
    width: 100vw;
  }
 .van-icon::before {
   color: #1E8DFF;
 }


  .van-cell__title {
    width: 100px;
  }

  .van-cell__title {
    width: 56px;
    height: 20px;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }

  .van-cell__value {
    width: 24px;
    height: 28px;
    font-size: 14px;
    color: #1E8DFF;
    line-height: 29px;
  }

  .text {
    margin-left: -80px;
  }
</style>
